import React, { memo } from "react";
import { BottomMusicWrapper } from "./style";
import { useSelector } from "react-redux";
export default memo(function BottomMusic() {
  // const dispatch = useDispatch();
  const { isBottomMusic, lyricIndex, lyric } = useSelector((state) => ({
    isBottomMusic: state.getIn(["player", "isBottomMusic"]),
    lyricIndex: state.getIn(["player", "lyricIndex"]),
    lyric: state.getIn(["player", "lyric"]),
  }));

  let conent =
    (lyric[lyricIndex] && lyric[lyricIndex].content) ||
    (lyric[lyricIndex] && lyric[lyricIndex + 1].content);
  //let length = conent.length;
  return (
    <BottomMusicWrapper isBottomMusic={isBottomMusic}>
      <div className="content">{conent}</div>
    </BottomMusicWrapper>
  );
});
